<template>
	<div class="table-box">
		<proTable
			ref="proTableRef"
			:columns="columns"
			:toolButton="false"
			:requestApi="api.GetInformationDtoPageApi"
			:dataCallback="dataCallback"
		>
			<template #tableHeader>
				<el-button type="primary" :icon="CirclePlus" @click="openDrawer('添加')">添加文章</el-button>
			</template>
			<template #cover="scope">
				<el-image
					class="table-td-thumb"
					:src="scope.row.cover"
					:z-index="10"
					:preview-src-list="[scope.row.cover]"
					preview-teleported
				>
				</el-image>
			</template>
			<template #categoryName="scope">
				{{ scope.row.categoryName }}
			</template>
			<template #isEnable="scope">
				<el-tag :type="scope.row.isEnable ? 'success' : 'danger'">
					{{ scope.row.isEnable ? "启用" : "禁用" }}
				</el-tag>
			</template>
			<template #operation="scope">
				<el-space wrap>
					<el-tag style="cursor: pointer" @click="openDrawer('编辑', scope.row.id)"> 编辑 </el-tag>
					<el-tag @click="handleDelete(scope.row.id)" style="cursor: pointer" type="danger"> 删除 </el-tag>
				</el-space>
			</template>
		</proTable>
		<eventDrawer ref="drawerRef" />
	</div>
</template>
<script lang="ts" setup name="logs">
import { ref } from "vue";
import api from "@/api/modules/news";
import category from "@/api/modules/category";
import { ColumnProps } from "@/components/ProTable/interface";
import { CirclePlus } from "@element-plus/icons-vue";
import { useHandleData } from "@/hooks/useHandleData";
import eventDrawer from "./components/InformDrawer.vue";
import proTable from "@/components/ProTable/index.vue";
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTableRef = ref();
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 datalist && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
const dataCallback = (data: any) => {
	return {
		list: data.data,
		total: data.totalCount
	};
};
// 删除操作
const handleDelete = async (id: string) => {
	await useHandleData(api.UpdateDeleteInformtionApi, { id }, `要删除`);
	proTableRef.value.getTableList();
};
const tranListToTreeData = (list: Array<any>) => {
	//处理扁平数据，转树形
	let treeList: Array<any> = [];
	let map: any = {};
	list.forEach(item => {
		item.children = [];
		map[item.id] = item;
	});
	list.forEach(item => {
		const res = map[item.parentId as string];
		if (res) {
			res.children.push(item);
		} else {
			treeList.push(item);
		}
	});
	return treeList;
};
const getCategoryList = async () => {
	let res: any = await category.GetAllCategorysApi("", "");
	let { code, data } = res.result;
	if (code != 200) return [];
	res.result.data = tranListToTreeData(data as any[]);
	return res.result;
};
// 表格配置项
let columns: Partial<ColumnProps>[] = [
	{ prop: "articleTitle", label: "文章标题" },
	{ prop: "cover", label: "封面图" },
	{
		prop: "categoryName",
		label: "所属分类"
	},
	{ prop: "createTime", label: "创建时间" },
	{ prop: "createUserName", label: "创建人" },
	{ prop: "readingCount", label: "阅读量" },
	{ prop: "isEnable", label: "状态" },
	{
		prop: "CategoryIds",
		label: "所属分类",
		enum: getCategoryList,
		isShow: false,
		search: {
			el: "cascader",
			props: { checkStrictly: true, multiple: true, props: { value: "id", label: "name", children: "children" } }
		},
		fieldNames: { label: "name", value: "id" }
	},
	{
		prop: "Keywords",
		label: "关键字",
		isShow: false,
		search: { el: "input", props: { placeholder: "请输入文章标题" } }
	},
	{ prop: "operation", label: "操作", width: 200, fixed: "right" }
];
// 打开 drawer(新增、查看、编辑)
const drawerRef = ref<InstanceType<typeof eventDrawer> | null>(null);
const openDrawer = (title: string, id: string | null = null) => {
	const params = {
		title,
		isView: title === "查看",
		id,
		api: title == "添加" ? api.AddInformtionApi : api.UpdateInformtionApi,
		getTableList: proTableRef.value.getTableList
	};
	drawerRef.value?.acceptParams(params);
};
</script>
<style lang="scss">
.table-td-thumb {
	display: block;
	width: 20px;
	height: 20px;
	margin: auto;
}
</style>
